<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        100% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="500"
         height="500"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         viewBox="0 0 500 500">

      <path d="M 10 10 L 20 10 L 20 30 M 40 40 L 55 35"
            style="stroke: black;" />

      <path d="M 10 10 l 10 0 l 0 20 m 20 10 l 15 -5"
            style="stroke: black;" />

      <path d="M 12 24 h 15 v 25 h -15 z" />


      <!--
        大写字母：绝对坐标，相对于坐标系
        小写字母：相对坐标，相当于当前位置

        水平和垂直的lineto：
          H：L 20 current_y，绘制一条到(20, current_y)的线
          h：l 20 0，绘制一条到(current_x + 20, current_y)的线
          V：V current_x 20，绘制一条到(current_x, 20)的线
          v：v 0 20，绘制一条到(current_x, current_y + 20)的线
      -->


      <!-- H、h、V、v的简写 -->
      <path d="M 200 200 h 100 v 50 h -100 v -50 z" />
      <!-- 超级简写版 -->
      <path d="M200 200h100v50h-100v-50z" />

      <!-- moveto和lineto的简写 -->
      <g style="fill:none; stroke: black">
        <path d="M 30 30 L 55 5 L 80 30 L 55 55 Z" />
        <path d="M 30 30 L 55 5 80 30 55 55 Z" />
        <path d="M 30 30 55 5 80 30 55 55 Z" />
        <path d="m 30 30 l 25 -25 l 25 25 l -25 25 z" />
        <path d="m 30 30 l 25 -25 25 25 -25 25 z" />
        <path d="m 30 30 25 -25 25 25 -25 25 z" />
      </g>


    </svg>
  </body>

</html>
